<template>
  <div class="themeChangeContainer">
    <div>233</div>
    <el-button class="changeBtn" type="primary" @click="changeTheme" size="mini"
      >切换主题</el-button
    >
  </div>
</template>

<script>
export default {
  name: 'TestThemeChange',
  data() {
    return {
      curTheme: 'dark'
    };
  },
  methods: {
    changeTheme() {
      this.curTheme = this.curTheme === 'dark' ? 'light' : 'dark';
      let htmlDom = document.documentElement;
      htmlDom.setAttribute('data-theme', this.curTheme);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/themeChange.scss";
.themeChangeContainer {
  width: 200px;
  height: 100px;
  .changeBtn {
    position: fixed;
    right: 0;
    top: 0;
  }
  @include useTheme {
    background-color: getVal("bgColor");
    color: getVal("textColor");
    border: 2px solid getVal("borderColor");
  }
}
</style>
